Styling your charts

Changing chart fonts (titles, axis, tool-tips, labels, everything) for entire chart

To change fonts of elements in the chart, we can set the css style in the default classnames provided by muze.

/* Changes the font family of title */
#chart .muze-title-cell {
  font-family: Palatino !important;
}

/* Changes the font family of subtitle */
#chart .muze-subtitle-cell {
  font-family: Palatino !important;
}

/* Changes the font family of axis tick labels */
#chart .muze-ticks {
  font-family: Palatino !important;
}

/* Changes the font family of axis name */
#chart .muze-axis-name {
  font-family: Palatino !important;
}

/* Changes the font family of the whole tooltip content */
#chart .muze-tooltip-box {
  font-family: Palatino !important;
}

Example

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];

function numberFormatter(number) {
  const tier = (Math.log10(number) / 3) | 0;
  if (tier == 0) return number;
  const suffix = SI_SYMBOL[tier];
  const scale = Math.pow(10, tier * 3);
  const scaled = number / scale;
  return scaled.toFixed(1) + suffix;
}

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const RowField = "value";
const ColumnFiels = "month";
muze
  .canvas()
  .data(data)
  .rows([RowField]) 
  .columns([COlumnField]) 
  .config({
    sort: {
      month: (a, b) => months.indexOf(a) - months.indexOf(b),
    },
    axes: {
      y: {
        tickFormat: (val) => numberFormatter(val.rawValue),
        numberOfTicks: 8,
      },
    },
  })
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
    },
  ])
  .title("Coronavirus tests done by months")
  .subtitle("From April - August")
  .mount("#chart");

Changing the color scheme of data plots.

To add a color scheme to the data plots, we use the color api.

Let's see how we can achieve this,

muze.canvas().color({
  field: "State",
  range: ["pink", "orange", "red", "mauvish", "yellow"],
});

In the above code we have specified a range property in color object and passed an array of color strings.

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];

function numberFormatter(number) {
  const tier = (Math.log10(number) / 3) | 0;
  if (tier == 0) return number;
  const suffix = SI_SYMBOL[tier];
  const scale = Math.pow(10, tier * 3);
  const scaled = number / scale;
  return scaled.toFixed(1) + suffix;
}

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const RowField = "value";
const ColumnFiels = "month";

muze
  .canvas()
  .data(data)
  .rows([RowField]) 
  .columns([COlumnField]) 
  .config({
    sort: {
      month: (a, b) => months.indexOf(a) - months.indexOf(b),
    },
    axes: {
      y: {
        tickFormat: (val) => numberFormatter(val.rawValue),
        numberOfTicks: 8,
      },
    },
  })
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
    },
  ])
  .color({
    field: "state",
    range: ["pink", "orange", "red", "mauvish", "yellow"],
  })
  .title("Coronavirus tests done by states")
  .subtitle("From April - August")
  .mount("#chart");

Changing the color of other elements (axis, tool-tips etc.)

Axis Styling

Muze provides default class names for axis and tooltips.

Let's see how you can use these classes and change the color of axis ticks

• .muze-ticks: This classname is used for changing style of axis tick labels
• .muze-tick-lines: This classname is used for changing the style of axis tick lines

#chart .muze-ticks {
  fill: #bb9077;
}

#chart .muze-tick-lines {
  stroke: #626262;
}

Example

#chart .muze-ticks {
  fill: #bb9077;
}

#chart .muze-tick-lines {
  stroke: #626262;
}

JavaScript

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];

function numberFormatter(number) {
  const tier = (Math.log10(number) / 3) | 0;
  if (tier == 0) return number;
  const suffix = SI_SYMBOL[tier];
  const scale = Math.pow(10, tier * 3);
  const scaled = number / scale;
  return scaled.toFixed(1) + suffix;
}

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const RowField = "value";
const ColumnField = "month";
const ColorField = "state";

muze
  .canvas()
  .data(data)
  .rows([RowField]) 
  .columns([ColumnField]) 
  .config({
    sort: {
      month: (a, b) => months.indexOf(a) - months.indexOf(b),
    },
    axes: {
      y: {
        tickFormat: (val) => numberFormatter(val.rawValue),
        numberOfTicks: 8,
      },
    },
  })
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
    },
  ])
  .color({
    field: "state",
    range: ["pink", "orange", "red", "mauvish", "yellow"],
  })
  .title("Coronavirus tests done by states")
  .subtitle("From April - August")
  .mount("#chart");

Tooltip Styling

Muze adds classnames in tooltip elements which you can use to change the style of tooltip.

• .muze-tooltip-box: This classname is used to set the background and color of the tooltip container

#chart .muze-tooltip-box {
  padding: 5px;
  background: #2d2424;
  color: #fff;
  box-shadow: none;
}

#chart .muze-tooltip-value {
  color: #fff;
}

#chart .muze-tooltip-key {
  color: #fff;
}


#chart .muze-tooltip-content-container-highlightSummary {
  border-right: none;
}

#chart .muze-tooltip-selected-row {
  background: #615252;
}

  const { muze, getDataFromSearchQuery, env } = viz;
  const data = getDataFromSearchQuery();

  const RowField = "Horsepower";
  const ColumnField = "Origin";
  const ColorField = "Cylinders";
  muze
    .canvas()
    .rows([RowField])
    .columns([ColumnField])
    .color(ColorField)
    .data(data)
    .layers([
      {
        mark: "bar",
        transform: { type: "group" }
      }
    ])
    .title("Grouped bar chart", { position: "bottom", align: "right" })
    .subtitle("Horsepower by Origin coloured by Cylinders", {
      position: "bottom",
      align: "right"
    })
    .mount("#chart");

Styling the title and subtitle (including alignment)

Muze provides classnames for title and subtitle which can be used to change their style.

• muze-title-cell: Styles the title element.
• muze-subtitle-cell: Styles the subtitle element.

CSS

#chart .muze-title-cell {
  font-family: Arial;
  color: #090f54;
}

#chart .muze-subtitle-cell {
  font-family: Arial;
  color: #626262;
}

JavaScript

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];

function numberFormatter(number) {
  const tier = (Math.log10(number) / 3) | 0;
  if (tier == 0) return number;
  const suffix = SI_SYMBOL[tier];
  const scale = Math.pow(10, tier * 3);
  const scaled = number / scale;
  return scaled.toFixed(1) + suffix;
}

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const RowField = "value";
const ColumnFiels = "month";
muze
  .canvas()
  .data(data)
  .rows([RowField]) 
  .columns([ColumnField]) 
  .config({
    sort: {
      month: (a, b) => months.indexOf(a) - months.indexOf(b),
    },
    axes: {
      y: {
        tickFormat: (val) => numberFormatter(val.rawValue),
        numberOfTicks: 8,
      },
    },
  })
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
    },
  ])
  .color({
    field: "state",
    range: ["pink", "orange", "red", "mauvish", "yellow"],
  })
  .title("Coronavirus tests done by states")
  .subtitle("From April - August")
  .mount("#chart");

Adding a background color to the chart

Background color of chart can be changed using muze-group-container classname.

Let's see how we can do this using css:

CSS

#chart .muze-group-container {
  background: #ffdddd;
}

JavaScript

  const { muze, getDataFromSearchQuery, env } = viz;
  const data = getDataFromSearchQuery();

  // Declare fields for rows, columns, and color as done above for consistency and clarity
  const RowField = "Horsepower";
  const ColumnField = "Origin";
  const ColorField = "Cylinders";

  muze
    .canvas()
    .rows([RowField])
    .columns([ColumnField])
    .color(ColorField)
    .data(data)
    .layers([
      {
        mark: "bar",
        transform: { type: "group" }
      }
    ])
    .title("Grouped bar chart", { position: "bottom", align: "right" })
    .subtitle("Horsepower by Origin coloured by Cylinders", {
      position: "bottom",
      align: "right"
    })
    .mount("#chart");